const ID = window.location.search.substr(4) // "?id=58953"
// TODO== 将来由列表的编辑按钮点击进入到此页时,判断是否有文章ID

// let Id = ?
//  //
// ???/ 获取list.html中内嵌的list.js中a的href设置的url?Id参数值=>解决方案
// 1. 挂window=>写过了 所以不写了
// 2. 因为数据的url一部分=>操作url=>BOM=>location.href | location.search=?
// 获取url的?后面的数据(包含?)
// 获取文章分类

const handleID = () => {
  if (ID) {
    // 获取文章详情数据by id
    getArticleDetailById(ID, (res) => {
      console.log(res)
      // 下拉框的数据
      form.val('edit', res.data.data)
      layui.form.render('select', 'edit')

      // 封面图片 cropper
      cropper.replace(
        'http://ajax.frontend.itheima.net' + res.data.data.cover_img
      )
    })
  }
}
handleID()

const loadCateList = () => {
  getCateList((res) => {
    // console.log(res)
    const dataSelect = res.data.data
    dataSelect.forEach((item) => {
      let optionStr = `<option value=${item.Id} lay-verify="cate">${item.name}</option>`
      $('select[name=cate_id]').append(optionStr)
    })
    layui.form.render('select', 'edit')
    handleID()
  })
}

loadCateList()

// 富文本编辑器的初始化
initEditor()
// 选择图片的插件配置
let cropper
function initCropper() {
  // 1. 集成裁剪插件
  const image = document.getElementById('image') // 获取到要被添加裁剪插件的图片
  cropper = new Cropper(image, {
    aspectRatio: 1, // 横纵比例
    preview: $('.img-preview'),
  })
}
initCropper()

$('.select').on('click', (e) => {
  // // input[type=file]标签的样式改不动, 所以我们用button[class=select]按钮来让用户点击
  $('#file').click() // JS代码来主动触发input[type=file]的点击事件 - 选择文件的窗口就出来
})

// 4. 选择文件窗口出现 - 选中文件点击打开, 会触发change事件
$('#file').on('change', function (e) {
  let url = URL.createObjectURL(this.files[0]) // URL是window内置的对象, createObjectURL就是把blob对象(File的父类)转成url地址(浏览器本地的-跟后台无关)
  cropper.replace(url) // 让cropper重新设置图片url地址以及重新构建cropper
})
// 最后一定是提交表单=>form格式确定=>看接口文档=>提交时参数说明
$('.layui-form').on('submit', (e) => {
  e.preventDefault()
  // 处理表单数据
  // 富文本编辑器的数据
  let htmlStr = tinyMCE.activeEditor.getContent()
  // 图片blob
  let canvas = cropper.getCroppedCanvas({
    width: 100,
    height: 100,
  })

  // 后台要的是FormData数据类型(内容载体)
  let fd = new FormData($('.layui-form')[0])
  // 包装成formData格式
  fd.set('content', htmlStr)
  canvas.toBlob(function (blobObj) {
    fd.append('cover_img', blobObj)
    // fd.forEach((value, key) => {
    //   console.log(key, value)
    // })

    // 发送请求
    if (ID) {
      // 根据文章id编辑文章 => API
      fd.append('Id', ID)
      postArticleEditById(fd, (res) => {
        setTimeout(() => {
          window.location.href = '../list/list.html'
        }, 800)
      })
    } else {
      // 发布新文章
      postArticleAdd(fd, (res) => {
        //   console.log(res)
        // 进入文章列表
        setTimeout(() => {
          window.location.href = '../list/list.html'
        }, 800)
      })
    }
  })
})

// 页面通信
// 场景: A.html使用B.html的数据 (`暂时`有下面的方案)
// 1. window 利用js环境的顶层对象
// 2. location 利用BOM对象
// 3. localStorage  利用H5新特性 WebStorage中的ls
